$n: 4;
@mixin flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: $direction;
}

.wx-flex {
	display: flex;
}

@for $i from 1 through 12 {
	.wx-flex-#{$i} {
		flex-grow: #{$i};
	}
}

.wx-flex-row {
	flex-direction: row;
}

.wx-flex-col {
	flex-direction: column;
}

.wx-flex-reverse {
	flex-direction: row-reverse;
	flex-direction: column-reverse;
}

.wx-flex-start {
	justify-content: flex-start;
}

.wx-flex-center {
	justify-content: center;
}

.wx-flex-end {
	justify-content: flex-end;
}

.wx-flex-between {
	justify-content: space-between;
}

.wx-flex-around {
	justify-content: space-around;
}

.wx-items-center {
	align-items: center;
}

.wx-items-start {
	align-items: flex-start;
}

.wx-items-end {
	align-items: flex-end;
}

.wx-items-stretch {
	align-items: stretch;
}


.wx-content-center {
	align-content: center;
}

.wx-content-start {
	align-content: flex-start;
}

.wx-content-end {
	align-content: flex-end;
}

.wx-content-between {
	align-content: space-between;
}

.wx-content-around {
	align-content: space-around;
}

.wx-content-stretch {
	align-content: stretch;
}

.wx-flex-warp {
	flex-wrap: wrap;
}

.wx-flex-nowarp {
	flex-wrap: nowrap;
}

.wx-flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

.wx-flex-shrink {
	flex-shrink: 0;
}

.wx-fixed {
	position: fixed;
}

.wx-relative {
	position: relative;
}

.wx-absolute {
	position: absolute;
}

.wx-margin-auto {
	margin: 0 auto;
}

.wx-text-center {
	text-align: center;
}

.wx-text-left {
	text-align: left;
}

.wx-text-right  {
	text-align: right;
}

.wx-text-underline {
	text-decoration-line: underline;
}

.wx-text-delete {
	text-decoration-line: line-through;
}

.wx-text-clip {
	text-overflow: clip;
}

.wx-text-ellipsis {
	text-overflow: ellipsis;
}

@for $i from 0 through 50 {
	@if $i <= 10 {
		.wx-opacity-#{$i} {
			opacity: #{$i * 0.1};
		}
	}
	@if $i <= 25 {
		.wx-ma-n#{$i} {
			margin: #{$i * $n}px
		}
		.wx-ml-n#{$i} {
			margin-left: #{$i * $n}px;
		}
		.wx-mr-n#{$i} {
			margin-right: #{$i * $n}px;
		}
		.wx-mt-n#{$i} {
			margin-top: #{$i * $n}px;
		}
		.wx-mb-n#{$i} {
			margin-bottom: #{$i * $n}px;
		}
		.wx-mx-n#{$i} {
			margin-left: #{$i * $n}px;
			margin-right: #{$i * $n}px;
		}
		.wx-my-n#{$i} {
			margin-top: #{$i * $n}px;
			margin-bottom: #{$i * $n}px;
		}
		
		.wx-pa-n#{$i} {
			padding: #{$i * $n}px
		}
		.wx-pl-n#{$i} {
			padding-left: #{$i * $n}px;
		}
		.wx-pr-n#{$i} {
			padding-right: #{$i * $n}px;
		}
		.wx-pt-n#{$i} {
			padding-top: #{$i * $n}px;
		}
		.wx-pb-n#{$i} {
			padding-bottom: #{$i * $n}px;
		}
		.wx-px-n#{$i} {
			padding-left: #{$i * $n}px;
			padding-right: #{$i * $n}px;
		}
		.wx-py-n#{$i} {
			padding-top: #{$i * $n}px;
			padding-bottom: #{$i * $n}px;
		}
		
		.wx-zIndex-#{$i} {
			z-index: #{$i};
		}
		.wx-zIndex-n#{$i} {
			z-index: #{$i * $n};
		}
	} 
	@if $i >= 1{
		.wx-ma-#{$i} {
			margin: #{$i}px
		}
		.wx-ml-#{$i} {
			margin-left: #{$i}px;
		}
		.wx-mr-#{$i} {
			margin-right: #{$i}px;
		}
		.wx-mt-#{$i} {
			margin-top: #{$i}px;
		}
		.wx-mb-#{$i} {
			margin-bottom: #{$i}px;
		}
		.wx-mx-#{$i} {
			margin-left: #{$i}px;
			margin-right: #{$i}px;
		}
		.wx-my-#{$i} {
			margin-top: #{$i}px;
			margin-bottom: #{$i}px;
		}
		
		.wx-pa-#{$i} {
			padding: #{$i}px
		}
		.wx-pl-#{$i} {
			padding-left: #{$i}px;
		}
		.wx-pr-#{$i} {
			padding-right: #{$i}px;
		}
		.wx-pt-#{$i} {
			padding-top: #{$i}px;
		}
		.wx-pb-#{$i} {
			padding-bottom: #{$i}px;
		}
		.wx-px-#{$i} {
			padding-left: #{$i}px;
			padding-right: #{$i}px;
		}
		.wx-py-#{$i} {
			padding-top: #{$i}px;
			padding-bottom: #{$i}px;
		}
	}
}